<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIJIMI几米手作评论</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(255, 182, 193, 0.2);
            overflow: hidden;
            border: 3px solid #ffd1dc;
        }
        
        .header {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.2em;
            margin-bottom: 10px;
        }
        
        .content {
            padding: 30px;
        }
        
        .api-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 15px;
            margin-bottom: 25px;
            border: 2px solid #e9ecef;
        }
        
        .api-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .api-input-group input {
            flex: 1;
            padding: 12px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .save-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #ff6b6b;
        }
        
        select, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #ffd1dc;
            border-radius: 10px;
            font-size: 16px;
            background: #fffafa;
        }
        
        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin-top: 10px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 10px;
            background: #fffafa;
            border-radius: 8px;
            border: 1px solid #ffd1dc;
        }
        
        .checkbox-item input {
            margin-right: 10px;
        }
        
        .btn-group {
            display: flex;
            gap: 15px;
            margin: 30px 0;
        }
        
        button {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .generate-btn {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
            color: white;
        }
        
        .generate-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        
        .generate-btn:disabled {
            background: #cccccc;
            cursor: not-allowed;
        }
        
        .copy-btn {
            background: linear-gradient(135deg, #ffd1dc 0%, #ffb6c1 100%);
            color: #ff6b6b;
        }
        
        .copy-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 182, 193, 0.4);
        }
        
        .result {
            background: #fffafa;
            border-radius: 15px;
            padding: 25px;
            border: 2px dashed #ffd1dc;
            margin-top: 20px;
            display: none;
        }
        
        .result h3 {
            color: #ff6b6b;
            margin-bottom: 15px;
            font-size: 1.3em;
        }
        
        .review-content {
            line-height: 1.8;
            font-size: 1.05em;
            color: #666;
            background: white;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid #ff6b6b;
            min-height: 100px;
        }
        
        .word-count {
            text-align: right;
            color: #ff8e8e;
            margin-top: 10px;
            font-weight: bold;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9em;
            margin-top: 10px;
        }
        
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ccc;
        }
        
        .status-dot.active {
            background: #4CAF50;
        }
        
        .loading {
            text-align: center;
            color: #ff6b6b;
            font-style: italic;
            padding: 20px;
        }
        
        .error {
            color: red;
            text-align: center;
            padding: 20px;
        }

        @media (max-width: 600px) {
            .container {
                margin: 10px;
            }
            .header {
                padding: 20px;
            }
            .content {
                padding: 20px;
            }
            .btn-group {
                flex-direction: column;
            }
            .api-input-group {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🍰  JIMI几米手作评论</h1>
            <p>基于DeepSeek AI • 智能生成独特评价</p>
        </div>
        
        <div class="content">
            <!-- API密钥设置 -->
            <div class="api-section">
                <h3 style="color: #31708f; margin-bottom: 15px;">🔑 DeepSeek API密钥</h3>
                <div class="api-input-group">
                    <input type="password" id="apiKey" placeholder="输入DeepSeek API密钥">
                    <button class="save-btn" onclick="saveApiKey()">保存密钥</button>
                </div>
                <div class="status-indicator">
                    <div class="status-dot" id="statusDot"></div>
                    <span id="statusText">未设置API密钥</span>
                </div>
                <p style="margin-top: 10px; font-size: 0.9em; color: #666;">
                    🔒 密钥仅存储在本地浏览器，不会上传到任何服务器
                </p>
            </div>

            <!-- 表单区域 -->
            <div class="form-group">
                <label>🎂 烘焙项目</label>
                <select id="project">
                   <option value="">请选择体验项目</option>
                    <option value="奶油蛋糕">蛋糕DIY</option>
                    <option value="黄油饼干">饼干DIY</option>
                    <option value="其他甜品">甜品DIY</option>
                    <option value="节日烘焙">烘焙DIY</option>
                    <option value="现烤披萨">披萨DIY</option>
                    <option value="面包制作">面包DIY</option>
                    <option value="趣趣拼豆">拼豆DIY</option>
                    <option value="其他手作">手作DIY</option>
                </select>
            </div>

            <div class="form-group">
                <label>⭐ 满意程度</label>
                <select id="satisfaction">
                    <option value="非常满意">🌟🌟🌟🌟🌟 非常满意</option>
                    <option value="很满意">🌟🌟🌟🌟 很满意</option>
                    <option value="满意">🌟🌟🌟 满意</option>
                </select>
            </div>

            <div class="form-group">
                <label>✨ 亮点体验</label>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight1" value="老师专业耐心">
                        <label for="highlight1">老师专业耐心</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight2" value="食材新鲜优质">
                        <label for="highlight2">食材新鲜优质</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight3" value="环境温馨舒适">
                        <label for="highlight3">环境温馨舒适</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight4" value="工具设备齐全">
                        <label for="highlight4">工具设备齐全</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight5" value="作品精美可口">
                        <label for="highlight5">作品精美可口</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight6" value="步骤讲解清晰">
                        <label for="highlight6">步骤讲解清晰</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight7" value="价格合理超值">
                        <label for="highlight7">价格合理超值</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight8" value="适合拍照打卡">
                        <label for="highlight8">适合拍照打卡</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="highlight9" value="水果新鲜装饰品多样">
                        <label for="highlight9">水果新鲜装饰品多样</label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>💝 特别体验（选填）</label>
                <textarea id="customContent" rows="3" placeholder="请描述让您印象深刻的细节，例如：老师的某个小技巧、特别喜欢的配方、温馨的服务，开心的过程等..."></textarea>
            </div>

            <div class="btn-group">
                <button class="generate-btn" onclick="generateReview()" id="generateBtn">🤖 生成评价</button>
                <button class="copy-btn" onclick="copyToClipboard()" style="display:none;" id="copyBtn">📋 复制文案</button>
            </div>

            <!-- 结果区域 -->
            <div class="result" id="result">
                <h3>AI为您生成的评价：</h3>
                <div class="review-content" id="reviewContent">
                    <div class="loading">AI正在创作中...</div>
                </div>
                <div class="word-count" id="wordCount">字数：0字</div>
                <button class="copy-btn" onclick="generateReview()" style="margin-top: 15px;">
                    🔄 重新生成
            </div>

            <div class="tips">
                💡 点击复制评论可直接转至美团、大众点评、抖音、小红书进行评论
            </div>
        </div>
    </div>

    <script>
        // 等待DOM完全加载
        document.addEventListener('DOMContentLoaded', function() {
            initializeApp();
        });

        function initializeApp() {
            // 检查是否有保存的API密钥
            const savedApiKey = getApiKey();
            if (savedApiKey) {
                document.getElementById('apiKey').value = '••••••••••••••••';
                updateStatus(true);
            } else {
                updateStatus(false);
            }
        }

        function saveApiKey() {
            const apiKey = document.getElementById('apiKey').value;
            if (apiKey) {
                localStorage.setItem('deepseek_api_key', apiKey);
                updateStatus(true);
                alert('API密钥已保存！');
            } else {
                alert('请输入API密钥');
            }
        }

        function getApiKey() {
            return localStorage.getItem('deepseek_api_key');
        }

        function updateStatus(hasKey) {
            const statusDot = document.getElementById('statusDot');
            const statusText = document.getElementById('statusText');
            
            if (statusDot && statusText) {
                if (hasKey) {
                    statusDot.classList.add('active');
                    statusText.textContent = 'API密钥已设置';
                    statusText.style.color = '#4CAF50';
                } else {
                    statusDot.classList.remove('active');
                    statusText.textContent = '未设置API密钥';
                    statusText.style.color = '#666';
                }
            }
        }

        async function generateReview() {
            const apiKey = getApiKey();
            if (!apiKey) {
                alert('请先设置API密钥');
                return;
            }

            const project = document.getElementById('project').value;
            const satisfaction = document.getElementById('satisfaction').value;
            const customContent = document.getElementById('customContent').value;
            
            if (!project) {
                alert('请选择烘焙项目');
                return;
            }

            const highlights = [];
            const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
            checkboxes.forEach(cb => {
                highlights.push(cb.value);
            });

            // 安全地显示加载状态
            const resultElement = document.getElementById('result');
            const reviewContentElement = document.getElementById('reviewContent');
            const generateBtn = document.getElementById('generateBtn');
            const copyBtn = document.getElementById('copyBtn');
            const wordCountElement = document.getElementById('wordCount');

            if (resultElement) resultElement.style.display = 'block';
            if (reviewContentElement) reviewContentElement.innerHTML = '<div class="loading">AI正在创作中，请稍候...</div>';
            if (generateBtn) generateBtn.disabled = true;
            if (copyBtn) copyBtn.style.display = 'none';

            try {
                const review = await generateWithDeepSeek(project, satisfaction, highlights, customContent, apiKey);
                
                if (reviewContentElement) reviewContentElement.textContent = review;
                if (wordCountElement) wordCountElement.textContent = `字数：${review.length}字`;
                if (copyBtn) copyBtn.style.display = 'block';
                
            } catch (error) {
                console.error('生成失败:', error);
                if (reviewContentElement) {
                    reviewContentElement.innerHTML = '<div class="error">生成失败：' + error.message + '</div>';
                }
            } finally {
                if (generateBtn) generateBtn.disabled = false;
            }
        }

        async function generateWithDeepSeek(project, satisfaction, highlights, customContent, apiKey) {
            const prompt = `请为烘焙手作店生成评价：
项目：${project}
满意度：${satisfaction}
亮点：${highlights.join('，')}
特别：${customContent || '无'}

要求：真实体验，150-200字，包含烘焙细节和情感。`;
            
            const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    model: 'deepseek-chat',
                    messages: [
                        {
                            role: 'system',
                            content: '你是烘焙店评价助手。生成真实、简洁的评价，150-200字。包含具体烘焙细节和情感。'
                        },
                        {
                            role: 'user',
                            content: prompt
                        }
                    ],
                    temperature: 0.7,
                    max_tokens: 500
                })
            });

            if (!response.ok) {
                throw new Error(`API请求失败: ${response.status}`);
            }

            const data = await response.json();
            return data.choices[0].message.content.trim();
        }

        function copyToClipboard() {
            const reviewContentElement = document.getElementById('reviewContent');
            if (reviewContentElement) {
                const content = reviewContentElement.textContent;
                navigator.clipboard.writeText(content).then(() => {
                    alert('文案已复制到剪贴板！');
                });
            }
        }
    </script>
</body>
</html>